<template>
    <view class="container">
        <view class="search" @click="goToSearch">
            <view class="search-box">
                <view class="search-inner">
                    <view class="left">
                        <view class="icon iconfont iconchaxun"></view>
                    </view>
                    <view class="right">点击查询</view>
                </view>
            </view>
            <view class="search-sapce"></view>
        </view>

        <view class="main">
            <view v-if="clubNoData">
                <noData noDataHeight="300px"></noData>
            </view>

            <view v-else>
                <view v-bind:key="item.ClueID" class="top-item" v-for="item in clueList">
                    <view class="title">
                        <view class="left">{{item.PlateNo}}</view>
                        <view class="right">
                            <view :data-culbid="item.ClueID" @click="goToEdit" class="icon iconfont iconbianji"></view>
                        </view>
                    </view>

                    <view class="top-inner">
                        <view class="inner-left">
                            <view class="top-item-text">姓名：{{item.UserName}}</view>
                            <view class="top-item-text">线索类型：{{item.ClueTypeName}}</view>
                            <view class="top-item-text">品牌车型：{{item.Brand}}{{item.Model}}</view>
                            <view class="top-item-text">保险到期时间：{{item.EndDate}}</view>
                            <view class="top-item-text">车辆初登时间：{{item.RegisterDate}}</view>
                            <view class="top-item-text">线索分配时间：{{item.Assign}}</view>
                        </view>
                        <view class="inner-right">
                            <view class="inner-right-text">{{item.PurchaseStep}}</view>
                            <view class="inner-right-text status">{{item.FlowStep}}</view>
                        </view>
                    </view>

                    <view class="top-footer">
                        <view class="footer-item" :data-mobile="item.Mobile" :data-clueid="item.ClueID" @click="cMakeCall">
                            <text class="icon iconfont icondianhua"></text>
                            <text class="icon-text">外呼</text>
                        </view>
                        <view class="footer-item" @click="isShowEditTap" :data-clueid="item.ClueID">
                            <text class="icon iconfont iconsettingsfill"></text>
                            <text class="icon-text">设置</text>
                        </view>
                    </view>
                </view>

                <view class="load-more" v-if="isShowMore">
                    <uni-load-more iconType="circle" :status="status" />
                </view>

            </view>
        </view>

        <!-- 设置 -->
        <edit :isShowEdit="isShowEdit" :editTitle="editTitle" @evenHideEdit="isHideEditTap" @evenEditConfirm="confirm"
            :editType="editType" :todoId="todoId" :clueId="clueId"></edit>

    </view>
</template>

<script>
    import util from '@/utils/util.js';
    import {
        clubList,
        addToDo,
        bindTel
    } from '@/utils/api.js';
    import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
    import noData from '@/components/noData/noData.vue';
    import edit from '@/components/edit/edit.vue';
    export default {
        components: {
            edit,
            uniLoadMore,
            noData
        },
        data() {
            return {
                clubNoData: false, //暂无数据
                clueList: [],
                isShowEdit: false,
                editTitle: '', //编辑title
                editType: null, //设置的类型   todo 代办  clue  线索
                todoId: 0, //代办id
                clueId: null, //线索id
                cluePageIndex: 1, //线索页码
                cluepageSize: 10, //线索数据条数
                purchaseStepArr: ['无', '低', '中', '高'], //线索意愿等级
                flowStepArr: ['待跟进', '跟进中', '成交', '战败'], //线索状态
                isShowMore: false, //是否还有更多
                status: 'loading', //加载更多的类型
            }
        },
        onLoad() {},
        onShow() {
            console.log(this.$store.state.search)
            if (this.$store.state.search.isSearch) {
                uni.startPullDownRefresh();
            } else {
                //如果已经查询过，就不查询
                if (this.clueList.length < 1) {
                    uni.startPullDownRefresh();
                }
            }
        },
        onHide() {
            //页面隐藏的时候重置搜索信息
            this.$store.dispatch('search/clearSearchInfo').then(function() {
                console.log('全局查询信息重置成功');
            })
            //页面隐藏的时候重置搜索信息
            this.$store.dispatch('carMake/clearMakeInfoSet').then(function() {
                console.log('全局查询信息重置成功');
            })
        },
        //上拉加载
        onReachBottom() {
            this.isShowMore = true;
            this.cluePageIndex++;
            this.getClubList();
        },
        //下拉刷新
        onPullDownRefresh() {
            this.cluePageIndex = 1;
            this.getClubList();
            setTimeout(function() {
                uni.stopPullDownRefresh();
            }, 2000);
        },
        methods: {
            //前往编辑页面
            goToEdit(e) {
                let id = e.currentTarget.dataset.culbid;
                let query = '?clubid=' + id;
                uni.navigateTo({
                    url: '/pages/clue/clubCenter' + query
                })
            },
            //前往查询页面
            goToSearch() {
                uni.navigateTo({
                    url: '/pages/clue/search'
                })
            },
            //获取线索列表
            getClubList() {
                let self = this;
                util.safeRquest().then(function(userId) {
                    let info = {
                        BeginDate: self.$store.state.search.insureStartDate,
                        EndDate: self.$store.state.search.insureEndDate,
                        UserID: userId,
                        FlowStep: self.$store.state.search.flowStepStatus,
                        PurchaseStep: self.$store.state.search.purchaseStepStatus,
                        BrandID: self.$store.state.search.brandId,
                        ModelID: self.$store.state.search.modelId,
                        ClueType: self.$store.state.search.clueType,
                        PageSize: self.cluepageSize,
                        PageIndex: self.cluePageIndex
                    };

                    console.log(info)
                    clubList(info).then(function(res) {
                        //如果在开始就清空数组，页面会有空白期，所以放到相应
                        if (self.cluePageIndex == 1) {
                            self.clueList = [];
                        }

                        self.status = 'loading';
                        let rdata = res.data;
                        console.log(rdata)
                        if (rdata.status == 0 && rdata.data.total > 0) {
                            let list = rdata.data.rows;
                            list.map(function(item, index) {
                                //保险到期时间
                                item.EndDate = util.formatDate(item.EndDate, 'yyyy-MM-dd');
                                //车辆初登时间 （注册时间）
                                item.RegisterDate = util.formatDate(item.RegisterDate,'yyyy-MM-dd');
                                //线索分配时间
                                item.Assign = util.formatDate(item.Assign, 'yyyy-MM-dd hh:mm');
                                //线索意愿等级
                                item.PurchaseStep = self.purchaseStepArr[item.PurchaseStep];
                                //线索跟进状态
                                item.FlowStep = self.flowStepArr[item.FlowStep];
                            })

                            self.clueList = self.clueList.concat(list);
                            if (list.length < self.cluepageSize) { //没有更多了
                                self.status = 'noMore';
                            } else {
                                setTimeout(function() {
                                    self.isShowMore = false;
                                }, 1500);

                            }
                            self.clubNoData = false;
                        } else {
                            self.clubNoData = true;
                            self.isShowMore = false;
                        }

                        uni.stopPullDownRefresh();
                    }).catch(function(err) {
                        self.clubNoData = true;
                        self.isShowMore = false;

                        uni.stopPullDownRefresh();
                        uni.showToast({
                            title: err.message,
                            icon: 'none'
                        });
                    })
                }).catch(function() {
                    self.clubNoData = true;
                    self.isShowMore = false;
                })
            },
            //显示设置
            isShowEditTap(e) {
                let ds = e.currentTarget.dataset;
                console.log(ds)
                this.editType = "clue"; //设置的类型   todo 代办  clue  线索
                this.clueId = ds.clueid; //当前被选中的id                
                this.isShowEdit = true;
                this.editTitle = "线索设置";

            },
            //隐藏设置
            isHideEditTap() {
                this.isShowEdit = false;
            },
            //线索设置提交
            confirm(info) {
                console.log(info)
                let self = this;
                if (!!info) {
                    self.isHideEditTap();
                    addToDo(info).then(function(res) {
                        let rdata = res.data;
                        if (rdata.status == 0 && rdata.data) {
                            uni.showToast({
                                title: '设置成功'
                            })
                        } else {
                            uni.showToast({
                                title: '设置失败',
                                icon: 'none'
                            })
                        }
                    }).catch(function(err) {
                        uni.showToast({
                            title: err.message,
                            icon: 'none'
                        })
                    })
                }

            },
            //外呼
            cMakeCall(e) {
                let ds = e.currentTarget.dataset;
                console.log(ds)
                let mobiles = [];
                let mobile = ds.mobile; //当前被选中的id
                let clueId = ds.clueid; //当前被选中的id
                if (util.isMoile(mobile)) {
                    mobiles.push(mobile);
                }

                util.safeRquest().then(function(userId) {
                    let info = {
                        UserID: userId,
                        ClueID: clueId
                    };
                    console.log(info)
                    bindTel(info).then(function(res) {
                        let rdata = res.data;
                        console.log(rdata)
                        if (rdata.status == 0) {
                            if (rdata.data.code == '0') {
                                mobiles.push(rdata.data.data.telX);
                            }
                        }

                        console.log(mobiles)
                        if (mobiles.length == 1) {
                            uni.makePhoneCall({
                                phoneNumber: mobiles[0]
                            })
                        } else if (mobiles.length == 2) {
                            uni.showActionSheet({
                                itemList: mobiles,
                                success: function(res) {
                                    uni.makePhoneCall({
                                        phoneNumber: mobiles[res.tapIndex]
                                    });
                                },
                            })
                        } else {
                            uni.showToast({
                                title: '电话拨号失败,请稍后重试',
                                icon: 'none'
                            });
                        }
                    });
                });

            }
        }
    }
</script>

<style>
    page {
        background-color: #f1f1f1;
    }

    .search-box {
        position: fixed;
        left: 0;
        top: 0;
        box-sizing: border-box;
        width: 100%;
        height: 90upx;
        background-color: #f1f1f1;
        padding: 12upx 20upx;
        z-index: 3;
    }

    .search-box .search-inner {
        display: flex;
        align-items: center;
        width: 100%;
        background-color: #fff;
        border-radius: 10upx;
    }

    .search-box .left {
        flex: 1;
        text-align: center;
    }

    .search-box .left .icon {
        font-size: 32upx;
        color: #999;
    }

    .search-box .right {
        flex: 9;
        font-size: 28upx;
        color: #999;
        padding-left: 10upx;
        line-height: 70upx;
    }

    .search-sapce {
        width: 100%;
        height: 90upx;
        background-color: #fff;
    }
</style>
